import React,{ useEffect, useState } from 'react'
import Taro, { useDidShow } from '@tarojs/taro'
import { View, Image, Text, Input } from '@tarojs/components'
import "taro-ui/dist/style/components/icon.scss";
import './index.scss'

export default function CardBind(props) {
  const [isAgree,setIsAgree] = useState(false)
  const [cardMark,setCardMark] = useState('')
  const [secretKey,setSecretKey] = useState('')
  const [selectMerchant, setselectMerchant] = useState({})
  useDidShow(()=>{
    setselectMerchant(Taro.getStorageSync('biddingCardMerchant') || Taro.getStorageSync('selectMerchant'))
  })
  return (
    <View class="card-bind">
      <View className="bind-header" onClick={()=>{
        Taro.navigateTo({
          url:`/mainPages/select-cinema/index?type=bidding`
        })
      }}>
        <View className="header-label">开卡影院</View>
        {selectMerchant.cinemaNickName}
        <View className="at-icon at-icon-chevron-right"></View>
      </View>

      <View className="bind-form">
        <View className="form-item">
          <View className="item-label">卡号</View>
          <Input className='input' placeholder='请输入卡号' onInput={e=>{
            setCardMark(e.target.value)
          }} />
        </View>
        <View className="form-item">
          <View className="item-label">卡密码</View>
          <Input className='input' placeholder='请输入卡密码' maxlength={16} type='password' onInput={e=>{
            setSecretKey(e.target.value)
          }} />
        </View>
      </View>

      <View className="bind-footer">
        {/* <View className="footer-agree">
          {isAgree?<Image onClick={()=>{setIsAgree(!isAgree)}} src={require('@/images/common/check-circle.svg')} className='agree-icon' />:<Image onClick={()=>{setIsAgree(!isAgree)}} src={require('@/images/common/check.svg')} className='agree-icon' />}
          <View style={{flex:1}}>我已阅读、理解并接受<Text>《上影单用途商业预付卡章程》《上影VIP卡使用的特别规定》</Text>和<Text>《上影俱乐部会员的规定》</Text></View>
        </View> */}
        <View className="footer-button"><View className="button" onClick={()=>{
          if(cardMark && secretKey){
            const data = {
              cardMark,
              cinemaId: selectMerchant.id,
              secretKey,
            }
            Taro.$post('/cinema-app/api/dx/card/bindCard',data,'1').then(res=>{
              if(res.code == '1'){
                Taro.$toast('提交成功','success')
                setTimeout(() => {
                  Taro.navigateBack()
                }, 1000);
              }else{
                Taro.$toast(res.message || '绑定失败')
              }
            })
            return;
          }
          Taro.$toast('请先输入卡号或者卡密码')
        }}>立即绑定</View></View>
      </View>
    </View>
  )
}